<script setup lang="ts"></script>
<template>
  <a-form >
    <a-form-item v-bind="validateInfos.tel">
      <a-input label="Activity name" v-model:value="modelRef.tel" required autocomplete="off" placeholder="请输入常用手机号/邮箱" />
    </a-form-item>
    <a-form-item v-bind="validateInfos.pwd">
            <a-input v-model:value="modelRef.pwd" required type="password" autocomplete="off" placeholder="请输入密码" />
        </a-form-item>
        <a-form-item>
            <p class="forgot">忘记密码？</p>
        </a-form-item>
    <a-form-item>
      <a-button type="primary" @click.prevent="onSubmit" block size="large">登 录</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts">
import { defineComponent, reactive, toRaw } from 'vue';
import { Form } from 'ant-design-vue';

const useForm = Form.useForm;
export default defineComponent({
  setup() {
    const modelRef = reactive({
      tel: '',
      pwd:'',
    });
    const rulesRef = reactive({
      tel: [
        {
          required: true,
          message: '请输入常用手机号/邮箱',
        },
      ],
      pwd: [
        {
          required: true,
          message: '请输入密码',
        },
      ],
      
    });
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
      onValidate: (...args) => console.log(...args),
    });
    const onSubmit = () => {
      validate()
        .then(() => {
          console.log(toRaw(modelRef));
        })
        .catch(err => {
          console.log('error', err);
        });
    };
    return {
      validateInfos,
      resetFields,
      modelRef,
      onSubmit,
    };
  },
});
</script>
<style lang="less" scoped>
.forgot {
    color: rgba(42, 130, 228, 1);
    font-size: 14px;
    text-align: right;
    margin-bottom: 32px;
    cursor: pointer;
}

.ant-input {
    border: none;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    height: 40px;
}
</style>